<template>
  <div class="login-box">
    <div>
      <div>username:admin</div>
      <div>password:12345678</div>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="formData"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号：" prop="username" class="formInput">
        <el-input
          v-model="formData.username"
          autocomplete="off"
          placeholder="请输入账号"
          input-style="width:300"
        />
      </el-form-item>
      <el-form-item label="密码：" prop="password" class="formInput">
        <el-input
          v-model="formData.password"
          type="password"
          autocomplete="off"
          placeholder="请输入密码"
          show-password
          @keydown.enter="submitForm(ruleFormRef)"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import type { FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { setToken } from "@/utils/localStorage";
import { Userrights } from "@/request/api";
interface Iperson {
  formData: IformData;
}
interface IformData {
  username: string;
  password: string;
}
export default defineComponent({
  name: "LoginView",
  setup() {
    const router = useRouter();
    const ruleFormRef = ref<FormInstance>();
    const rules = {
      username: [
        // {
        //   required: true,
        //   message: "请输入账号",
        //   trigger: "blur",
        // },
        // {
        //   min: 3,
        //   max: 10,
        //   message: "账号长度在3-10个字符",
        //   trigger: "blur",
        // },
        {
          required: true,
          validator: (rule: any, value: string, callback: any) => {
            if (value != "") {
              var reg = /^[\u4e00-\u9fa5]+|[a-zA-Z]+$/;
              if (reg.test(value)) {
                //匹配成功
                var len = value.replace(/[\u4e00-\u9fa5]/g, "bb").length;
                if (len <= 14) {
                  callback();
                } else {
                  callback(new Error("账号长度不能超过14个字符"));
                }
              } else {
                //报错
                callback(new Error("账号应为汉字或字符"));
              }
            } else {
              callback(new Error("请输入账号"));
            }
          },
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 10,
          message: "密码长度在6-10个字符内",
          trigger: "blur",
        },
      ],
    };
    const person: Iperson = reactive({
      formData: {
        username: "",
        password: "",
      },
    });
    /* 登录 */
    const submitForm = (formEl?: FormInstance | undefined) => {
      if (!formEl) return;
      //
      formEl.validate(async (valid: boolean) => {
        if (valid) {
          // 对表单内容进行验证
          const { data } = await Userrights(person.formData);
          if (data.data.desc === "200") {
            setToken(data.data);
            router.push("/");
          }else{
            alert(data.data.error)
          }
        } else {
          return false;
        }
      });
    };

    const resetForm = (formEl?: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    return { ...toRefs(person), submitForm, resetForm, ruleFormRef, rules };
  },
});
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background: url("@/assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .demo-ruleForm {
    margin-left: 450px;
    .formInput {
      width: 300px;
    }
  }
}
</style>
